<template>
  <div>
    <div class="search">
      <input type="text" class="searchInput" placeholder="输入城市名或拼音"  v-model='keyword'>
    </div>
    <div class="search-content" ref='list' v-show="keyword">
      <ul >
        <li @click="handleCityClcik(item.name)" class="search-item" v-for="(item,index) of list" :key='index'>{{item.name}}</li>
        <li class="search-item" v-show='hasNoData'>没有找匹配数据</li>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'CitySearch',
  props: {
    cities: Object
  },
  data () {
    return {
      keyword: '',
      list: []
      // timer: null
    }
  },
  methods: {
    handleCityClcik (city) {
      this.$store.dispatch('changeCity', city)
      this.$router.push('/')
    }
  },
  computed: {
    hasNoData () {
      return !this.list.length
    }
  },
  mounted () {
    this.scroll = new BScroll(this.$refs['list'])
  },
  watch: {
    keyword () {
      // if (this.timer) {
      //   clearTimeout(this.timer)
      // }
      if (!this.keyword) {
        this.list = []
        return
      }
      const result = []
      for (let i in this.cities) {
        this.cities[i].forEach((value) => {
          if (value.spell.indexOf(this.keyword) > -1 ||
            value.name.indexOf(this.keyword) > -1) {
            result.push(value)
          }
        })
      }
      this.list = result
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibies.styl';
  .search
    background $bgcolor
    padding 0 .1rem
    height .72rem
    .searchInput
      width 100%
      text-align center
      height .62rem
      line-height .62rem
      border-radius .06rem
      color #666
      padding 0 .1rem
      box-sizing border-box
  .search-content
    position absolute
    overflow hidden
    top 1.58rem
    bottom 0
    left 0
    right 0
    background #eee
    z-index 1
    .search-item
      color #666
      line-height 0.62rem
      padding-left .2rem
      background #fff
</style>
